<template>
    <div class="common-layout">
       <el-container>
           <el-header class="header_activate">
                <h1>联考卷审核</h1>
               <div class="search_activate" id="top_position"> 
                   <el-input v-model="state.input_user" placeholder="请输入手机/真名/试卷标题" />
                   <el-button type="warning" :icon="Search" @click="searchUserApplicationHandle"></el-button> 
               </div>
               <div class="filter">
                   <el-dropdown @command="handleCommand">
                       <span class="el-dropdown-link">
                           时间筛选
                       <el-icon class="el-icon--right">
                           <arrow-down />
                       </el-icon>
                       </span>
                       <template #dropdown>
                       <el-dropdown-menu>
                            <el-dropdown-item command="0" >不限</el-dropdown-item>
                           <el-dropdown-item command="7">近7天</el-dropdown-item>
                           <el-dropdown-item command="15">近15天</el-dropdown-item>
                           <el-dropdown-item command="30">近30天</el-dropdown-item>
                           <el-dropdown-item command="90" disabled>近90天</el-dropdown-item>
                           <el-dropdown-item command="180" divided>近半年</el-dropdown-item>                           
                       </el-dropdown-menu>
                       </template>
                   </el-dropdown>
               </div>
               <div class="filter">
                   <el-dropdown @command="handleTreatedCommand">
                       <span class="el-dropdown-link">
                           处理筛选
                       <el-icon class="el-icon--right">
                           <arrow-down />
                       </el-icon>
                       </span>
                       <template #dropdown>
                       <el-dropdown-menu>
                            <el-dropdown-item command="untreated" >未处理</el-dropdown-item>
                           <el-dropdown-item command="agree" disabled>已同意</el-dropdown-item>
                           <el-dropdown-item command="reject" disabled>已拒绝</el-dropdown-item>
                           <el-dropdown-item command="default" divided>全部</el-dropdown-item>                           
                       </el-dropdown-menu>
                       </template>
                   </el-dropdown>
               </div>
           </el-header>
           <el-divider />
           <el-main>
               <el-table class="tableClass" :data="state.applicationList" stripe                   
                   :header-cell-style="{ background: '#eef1f6', color: '#606266' }"                    
                    border
               > 
                   <el-table-column type="index" width="45" label="序" />
                   <el-table-column width="90" property="user_info.real_name" label="姓名" />
                   <el-table-column width="125" property="user_info.phone" label="手机" show-overflow-tooltip />
                   <el-table-column width="60" property="paper_info.grade" label="年级"/>            
                   <el-table-column width="150" property="paper_info.title" label="标题" />
                   <el-table-column width="70" label="内容"> 
                        <template #default="scope"> 
                            <el-button size="small" type="primary" @click="viewPaperQuestionsClick(scope.$index)">详</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column width="80" property="paper_info.open_level" label="公开"/>
                    <el-table-column width="80" property="paper_info.online" label="上/下线"/>  
                   <el-table-column width="115" property="add_date" label="日期"/>                 
                   <el-table-column width="95" property="status_info.name" label="处理结果"/>
                   <el-table-column align="center" width="90" label="操作" >                        
                       <template #default="scope"> 
                           <el-tooltip
                           class="box-item"
                           effect="dark"
                           content="上线"
                           placement="top"
                           >
                               <el-icon style="width: 1em; height: 1em; margin-right: 10px" @click="handleAgree(scope.$index)">
                                   <Select />
                               </el-icon>
                           </el-tooltip>
                           <el-tooltip
                           class="box-item"
                           effect="light"
                           content="下线"
                           placement="top"
                           >
                               <CloseBold style="width: 1em; height: 1em;" @click="handleReject(scope.$index)" />
                           </el-tooltip>
                       </template>
                   </el-table-column>
               </el-table>
               <!-- <el-pagination background layout="prev, pager, next" :total="1000" /> -->
               <el-pagination
               background
               layout="total, pre, pager, next"
               :total="state.total"                
               :page-size="state.pageSize"            
               @current-change="handleCurrentChange"
               />
           </el-main>
           <ShowQuestionReadOnlyDialog ref="showQuestionReadOnlyDialog"></ShowQuestionReadOnlyDialog>
       </el-container>
   </div>
</template>
 
<script setup>
import { Search, Document, ArrowDown, Select, CloseBold } from '@element-plus/icons-vue'
import {onMounted,  reactive, toRefs, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/utils/axios'
import ShowQuestionReadOnlyDialog from '@/views/ShowQuestionReadOnlyDialog.vue'

const showQuestionReadOnlyDialog = ref(null)
const state = reactive({
   input_user: '',
   days: 0,
   applicationList: [],
   total: 0, // 总条数
   currentPage: 1, // 当前页
   pageSize: 10, // 分页大小
   lastGetApplicationsMethod: 'default',
   paperquestionList:[]
})
// 获取所有联考卷申请表
const getApplicationsByDefault=()=>{
   let params = {     
       days: state.days,
       page: state.currentPage,
       size: state.size,
   }
   state.lastGetApplicationsMethod = 'default'
   axios.get(`/JointPaperApplicationModelViewSet/`, {params}).then(res => {
       if (res.code==200){
           console.log("申请列表：", res)
           state.applicationList = res.data.results
           state.total = res.total
       }else{       
           console.log("error", res.message)
       }
   })
   .catch((error)=>{
       console.log("昵称修改错误：", error)
   })
}
// 获取所有未处理的联考卷申请表
const getApplicationsByUntreated=()=>{
   let params = {     
       days: state.days,
       page: state.currentPage,
       size: state.size,
   }
   state.lastGetApplicationsMethod = 'untreated'
   axios.get(`/JointPaperApplicationModelViewSet/untreated`, {params}).then(res => {
       if (res.code==200){
           console.log("申请列表：", res)
           state.applicationList = res.data.results
           state.total = res.total
       }else{       
           console.log("error", res.message)
       }
   })
   .catch((error)=>{
       console.log("昵称修改错误：", error)
   })
}
const getApplicationsBySearch=()=>{
   let params = { 
        query_key: state.input_user,
       page: state.currentPage,
       size: state.size,
   }
   state.lastGetApplicationsMethod = 'search'
   axios.get(`/JointPaperApplicationModelViewSet/search/`, {params}).then(res => {
       if (res.code==200){
           console.log("搜索结果：", res)       
           state.applicationList = res.data.results
           state.total = res.total
       }else{
            ElMessage.error("没有查询到记录")    
           console.log("error", res.message)
       }
   })
   .catch((error)=>{
       console.log("获取数据错误：", error)
   })
}
onMounted(() => {
    getApplicationsByUntreated()
})
//设置天数
const handleCommand=(command=7)=>{
   command = parseInt(command)
   state.days = command
   getApplicationsByDefault()
}
// 设置试卷处理结果筛选
const handleTreatedCommand=(command)=>{  
   state.lastGetApplicationsMethod = command
   console.log("筛选结果：",state.lastGetApplicationsMethod)
   reGetApplication()
}
// 同意上线
const handleAgree=(index)=>{
   // console.log("处理同意")
   let params = {
       paper_id: state.applicationList[index].paper_info['id'],
       type: 0,
       operate: 'agree',
       days: state.days,        
   }
   axios.patch(`/JointPaperApplicationModelViewSet/${state.applicationList[index].id}/`, params).then(res => {
       if (res.code==200){
           // console.log("申请列表：", res)
           ElMessage.success("操作成功，同意上线！")
           reGetApplication()
            scrollToTop()           
       }else if(res.code==1022){
           ElMessage.error("此操作没必要！")
        }        
       else{
            ElMessage.error("error 500！")
           console.log("error", res)
       }
   })
   .catch((error)=>{
       console.log("获取数据错误：", error)
   })
}
// 拒绝上线
const handleReject=(index)=>{
   // console.log("处理拒绝")
   let params = {
        paper_id: state.applicationList[index].paper_info['id'],
       type: 0,
       operate: 'reject',
       days: state.days
   }
   axios.patch(`/JointPaperApplicationModelViewSet/${state.applicationList[index].id}/`, params).then(res => {
       if (res.code==200){
           // console.log("申请列表：", res)
           ElMessage.warning("操作成功，下线！")
           reGetApplication()
            scrollToTop()
       }else if(res.code==1022){
           ElMessage.error("此操作没必要！")
       } 
       else{
           console.log("error", res)
       }
   })
   .catch((error)=>{
       console.log("获取会员激活错误：", error)
   })
}
const searchUserApplicationHandle=()=>{
   getApplicationsBySearch()
}
// 滚到顶端
const scrollToTop=()=>{
   document.querySelector('#top_position').scrollIntoView(true);
}
//点击页码时触发
const handleCurrentChange = (newPage)=>{
   state.currentPage = newPage 
   reGetApplication()
   scrollToTop()
 }
 // 根据获取方式重新获取申请表
 const reGetApplication=()=>{
    if (state.lastGetApplicationsMethod == 'default'){
       getApplicationsByDefault(0, state.days)
   }else
   if(state.lastGetApplicationsMethod == 'search'){
       getApplicationsBySearch()
   }else{
        getApplicationsByUntreated()
   }
 }
 // 通过路由参数id获取试卷获取题目
 const getQuestionsByPaper=(paper_id)=>{
    axios.get("/GetQuestionsByPaper/",{
      params:{
        paper_id: paper_id,
        page: 1,
        size: 50,
      }
    }).then(res => {
        console.log("通过papper_id的题目：",res)
      if (res.code==200){
        state.paperquestionList = res.data.results
        showQuestionReadOnlyDialog.value.open(res.data.results)
      }else{
        ElMessage("获取题目失败")
        console.log("error", res) 
        if(res.code==403){
          ElMessage.error("请重新登录")
          router.push("/login")
        }
      }        
    })
    .catch((error)=>{
      console.log("获取题目列表错误：", error)
    })
  }
const viewPaperQuestionsClick=(index)=>{
    let paper_id = state.applicationList[index].paper_info.id
    console.log("试卷id:",paper_id)
    getQuestionsByPaper(paper_id)
}
</script>

<style scoped>
 .search_activate {
   display: flex;
   flex-flow: row nowrap;
   /* justify-content: space-between; */
   align-items: center;
   margin: 0 auto;
   height: 30px;
 }
 .header_activate{
   display: flex;
   flex-flow: row nowrap;
   justify-content:space-evenly;
   align-items: center;
   padding: 0px;
   height: 30px;
   width:800px;
 }
 span{
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: medium;
 }
 .tableClass .cell{   
   padding: 0!important;
   height: 20px!important;
   line-height: 20px!important;
   text-align: center;
   font-size: 10px;
 }
</style>